<script setup>
import { computed } from 'vue'
import { Icon } from 'vant';

defineOptions({
    name: 'BiNavBar'
})


const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    background: {
        type: String,
        default: 'linear-gradient(to bottom, #F8AEB7, #FD809C)'
    },
    shadow: {
        type: Boolean,
        default: true
    },
    arrowColor: {
        type: String,
        default: '#ffffff'
    },
    arrowSize: {
        type: String,
        default: '7vmin'
    },
    leftText: {
        type: String,
        default: ''
    },
    leftTextSize: {
        type: String,
        default: '20px'
    },
    textColor: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['clickLeft', 'clickRight'])

const headStyle = computed(() => {
    return {
        background: props.background,
        boxShadow: !props.shadow && 'none'
    }
})
</script>

<template>
    <header class="head" :style="headStyle">
        <div class="left" @click="emit('clickLeft')">
            <Icon name="arrow-left" :color="props.arrowColor" :size="props.arrowSize" style="padding: 0 2vmin;" />
            <span v-if="props.leftText" :style="{ fontSize: props.leftTextSize }">{{ props.leftText }}</span>
        </div>
        <div class="title">
            <slot name="center">
                <span class="van-ellipsis" :style="{ color: props.textColor }">{{ props.title }}</span>
            </slot>
        </div>
        <div class="right" @click="emit('clickRight')">
            <slot name="right">
            </slot>
        </div>
    </header>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>